<!DOCTYPE html>
<html lang="en">
<head>
	<title>$(option.label)页面</title>
	#@common()
</head>

<body class="no-skin">
	<div class="breadcrumbs" id="breadcrumbs">
		<ul class="breadcrumb">
			<li>
				<i class="ace-icon fa home-icon #(option.iconCols??'')"></i>
				<a href="javascript:;">#(option.label)</a>
			</li>
		</ul>
	</div>
	<div class="page-body">
		<table id="tree-table"></table>
		<div id="grid-pager"></div>
	</div>

	<script type="text/javascript">
		var jqGrid;
		$(function () {
			var options = {
				height: $(window).height() - 200,
				width: $(".page-body").width(),
				pager: "#grid-pager",
			};
			options.url = '#(option.url)/query'
			options.title = '#(option.label)数据展示'
			options.treeGrid = true;
			options.treeParent = "parentId";
			options.colNames = ["菜单名称", "菜单类型", "访问链接", "操作", "主键"];
			options.colModel = [{"name": "label"}, {"name": "type", formatter: fmtMenuType}, {"name": "url"}, {"name": "id", formatter: formatter}, {"name": "id", "key": true, "hidden": true}];

			options['buttons'] = {
				add: add
			};
			jqGrid = new JqGrid("#tree-table", options);
		})

		/** 格式化表格某一列*/
		var formatter = function (value, rows, row) {
			//console.log(value, rows, row)
			var isLeaf = row.isLeaf;
			var html = '<div class="btn-group">';
			if (isLeaf && (row.level > 1 || row.type == 5) && row.label != '权限管理') {
				html += '<button class="btn btn-sm btn-primary" onclick="setting(\'' + value + '\',\'' + row.label + '\')">设置</button>';
			}
			html += '<button class="btn btn-sm btn-primary" onclick="update(\'' + value + '\')">修改</button>';
			html += '<button class="btn btn-sm btn-primary" onclick="remove(\'' + value + '\')">删除</button>';
			if (row.levelIndex > 1) {
				html += '<button class="btn btn-sm btn-primary" onclick="moveup(\'' + value + '\')">上移</button>';
			}
			html += '</div>';
			return html;
		}

		/** 格式化菜单类型 */
		var fmtMenuType = function (value, rows, row) {
			var types = JSON.parse('#(types)');
			return types[value];
		}

		/** 设置权限功能  */
		function setting(optionId, title) {
			layer.open({
				type: 2,
				title: title + '功能设置',
				shade: [0.3],
				area: ['1024px', '800px'],
				content: '#(option.url)/setting?optionId=' + optionId,
			});
		}

		/** 打开新增权限的页面 */
		function add() {
			layer.open({
				type: 2,
				title: '新增菜单权限',
				area: ['800px', '450px'],
				resize: false,
				content: '#(option.url)/addMenu',
			})
		}

		/** 打开修改权限的页面 */
		function update(optionId) {
			layer.open({
				type: 2,
				title: '修改菜单权限',
				area: ['800px', '450px'],
				resize: false,
				content: '#(option.url)/updateMenu?optionId=' + optionId
			})
		}

		/** 删除权限的功能 */
		function remove(optionId) {
			layer.confirm('确认要删除当前菜单?', {title: '系统提示'}, function () {
				Http.get('#(option.url)/delMenu?optionId=' + optionId, function (res) {
					if (res.succeed) {
						layer.msg('删除成功', {shade: 0.1});
						jqGrid.reload();
					} else {
						layer.msg(res.messasge);
					}
				})
			})
		}

		/** 上移权限的功能 */
		function moveup(optionId) {
			layer.confirm('确定要上移当前菜单?', {title: '系统提示'}, function () {
				Http.get('#(option.url)/moveUp?optionId=' + optionId, function (res) {
					if (res.succeed) {
						layer.msg('上移成功', {shade: 0.1});
						jqGrid.reload();
					} else {
						layer.msg(res.message);
					}
				})
			})
		}

		$(window).resize(function () {
			jqGrid.setWidth();
			jqGrid.setHeight();
		})
	</script>
</body>

</html>